<script setup>
	import {getCurrentInstance, onMounted, ref} from "vue";
	import {delMember, getMemberPage, getMemberByKey, auditMember} from "@/api/member/member";
	import Pagination from "@/components/Pagination/index.vue";
	import EditDialog from './components/EditDialog.vue'
	import emitter from "@/utils/mitt";
	import { getToken } from "@/utils/auth";
	import { ElMessage } from 'element-plus'
	const {proxy} = getCurrentInstance();
	
	const queryForm = ref(null);
	const queryParams = ref({
		pageNum: 1,
		pageSize: 10,
		searchText: null,
	});
	
	const statusFlag = [
		{ label: '待审核', value: '1', elTagType: 'info' },
		{ label: '审核通过', value: '2', elTagType: 'primary' },
		{ label: '审核失败', value: '3', elTagType: 'danger' },
	]
	const sourceFlag = [
		{ label: 'PC申请', value: '1', elTagType: 'primary' }
	]
	
	const loading = ref(false);
	
	const tableData = ref([])
	const rowId = ref(null)
	const total = ref(0)
	const search = () => {
		getTableData()
	}
	const getTableData = async () => {
		loading.value = true
		const res = await getMemberPage({...queryParams.value})
		if(res.code === 200) {
			tableData.value = res.data.records
			total.value = res.data.total;
		}
		loading.value = false
	}
	
	const handleDelete = async (row) => {
		proxy.$modal.confirm('是否确认删除文章编号为"' + row.id + '"的数据项?').then(async function () {
			const res = await delMember({id: row.id})
			if(res.code === 200) {
				proxy.$modal.msgSuccess('删除成功')
				await getTableData()
			}
		})
	}
	
	const handleUpdate = async (row) => {
		rowId.value = row.id
		editVisible.value = true
		getDetailData()
	}
	
	const editVisible = ref(false)
	const closeEdit = (ifSubmit = false) => {
		rowId.value = null
		editVisible.value = false
		if(ifSubmit) {
			search()
		}
	}
	
	onMounted(() => {
		search()
		emitter.on( 'closeEdit', (ifSubmit) => {
			closeEdit(ifSubmit)
		})
	})

	const loadingDetail = ref(false);
	const detail = ref({})
	const radio = ref(1)
	const getDetailData = async () => {
		loadingDetail.value = true
		const res = await getMemberByKey({id: rowId.value})
		if(res.code === 200) {
			detail.value = res.data
		}
		loadingDetail.value = false
	}

	// 审核提交
	const auditSubmit = async () => {
		loadingDetail.value = true
		const status = radio.value === 1 ? 2 : 3
		const res = await auditMember({id: rowId.value, status})
		if(res.code === 200) {
			ElMessage.success('提交成功')
			rowId.value = null
			editVisible.value = false
		} else {
			ElMessage.error('提交失败')
		}
		loadingDetail.value = false
		getTableData()
	}

	const addVisible = ref(false)
	const showAddMember = () => {
		addVisible.value = true
	}
	const hideAddMember = () => {
		addVisible.value = false
		search()
	}
</script>

<template>
	<div class="app-container">
		<template  v-if="!editVisible">
			<el-form
				ref="queryForm"
				:model="queryParams"
				inline
				label-width="68px"
				@submit.native.prevent
			>
				<el-form-item label="公司名称" prop="searchText">
					<el-input
						:style="{ width: '200px' }"
						v-model="queryParams.searchText"
						clearable
						placeholder="请输入公司名称"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button :disabled="loading" icon="Search" type="primary" @click="search"></el-button>
					<el-button icon="plus" type="primary" @click="showAddMember">新增会员</el-button>
				</el-form-item>
			</el-form>
			<el-table
				v-loading="loading"
				:data="tableData"
				border
			>
				<!-- <el-table-column show-overflow-tooltip label="用户名" prop="name"/> -->
				<el-table-column show-overflow-tooltip label="公司名称" prop="unitName"/>
				<el-table-column show-overflow-tooltip label="法人名称" prop="corporationName"/>
				<el-table-column show-overflow-tooltip label="联系人" prop="contactsName"/>
				<el-table-column show-overflow-tooltip label="联系手机" prop="contactsPhone"/>
				<el-table-column show-overflow-tooltip label="申请时间" prop="createTime"/>
				<el-table-column show-overflow-tooltip label="申请来路" prop="applySource">
					<template #default="scope">
						<dict-tag :options="sourceFlag" :value="String(scope.row.applySource)"/>
					</template>
				</el-table-column>
				<el-table-column label="状态" prop="status">
					<template #default="scope">
						<dict-tag :options="statusFlag" :value="String(scope.row.status)"/>
					</template>
				</el-table-column>
				<el-table-column class-name="small-padding fixed-width" label="操作" width="120">
					<template #default="scope">
						<el-button
							:size="'small'"
							type="primary"
							icon="Edit"
							text
							@click="handleUpdate(scope.row)"
						>编辑
						</el-button>
						<el-button
							:size="'small'"
							type="danger"
							icon="Delete"
							text
							@click="handleDelete(scope.row)"
						>删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				v-show="total > 0"
				v-model:limit="queryParams.pageSize"
				v-model:page="queryParams.pageNum"
				:total="total"
				@pagination="search"
			></pagination>
		</template>

		<div class="detail" v-if="editVisible">
			<div class="section-title">企业基本信息</div>
			<el-row>
				<el-col :span="2">
					<div class="label">入会选项</div>
					<div class="value">
						<span v-if="detail.joinType === 1">注册地址</span>
						<span v-else>-</span>
					</div>
				</el-col>
				<el-col :span="7">
					<div class="label">注册地址</div>
					<div class="value">
						<span v-if="detail.registerProvince || detail.registerCity || detail.registerArea || detail.registerAddr">
							{{ detail.registerProvince }}
							{{ detail.registerCity }}
							{{ detail.registerArea }}
							{{ detail.registerAddr }}
						</span>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="label">单位名称</div>
					<div class="value">{{ detail.unitName || '-' }}</div>
				</el-col>
				<el-col :span="7">
					<div class="label">邮寄地址</div>
					<div class="value">
						<span v-if="detail.postProvince || detail.postCity || detail.postArea || detail.postAddr">
							{{ detail.postProvince }}
							{{ detail.postCity }}
							{{ detail.postArea }}
							{{ detail.postAddr }}
						</span>
					</div>
				</el-col>
				<el-col :span="2">
					<div class="label">成立日期</div>
					<div class="value">{{ detail.foundDate || '-' }}</div>
				</el-col>
				<el-col :span="2">
					<div class="label">注册资本</div>
					<div class="value">{{ detail.registerCapital ? detail.registerCapital + '万元' : '-' }}</div>
				</el-col>
			</el-row>
			<div class="section-title">法定代表情况</div>
			<el-row>
				<el-col :span="4">
					<div class="label">姓名</div>
					<div class="value">{{ detail.corporationName || '-' }}</div>
				</el-col>
				<el-col :span="4">
					<div class="label">职务</div>
					<div class="value">{{ detail.corporationPosition || '-' }}</div>
				</el-col>
				<el-col :span="5">
					<div class="label">电话号码</div>
					<div class="value">{{ detail.corporationPhone || '-' }}</div>
				</el-col>
				<el-col :span="6">
					<div class="label">电子邮件</div>
					<div class="value">{{ detail.corporationEmail || '-' }}</div>
				</el-col>
				<el-col :span="5">
					<div class="label">手机号码</div>
					<div class="value">{{ detail.corporationMobile || '-' }}</div>
				</el-col>
			</el-row>
			<div class="section-title">联系人情况</div>
			<el-row>
				<el-col :span="3">
					<div class="label">姓名</div>
					<div class="value">{{ detail.contactsName || '-' }}</div>
				</el-col>
				<el-col :span="3">
					<div class="label">职务</div>
					<div class="value">{{ detail.contactsPosition || '-' }}</div>
				</el-col>
				<el-col :span="4">
					<div class="label">电话号码</div>
					<div class="value">{{ detail.contactsPhone || '-' }}</div>
				</el-col>
				<el-col :span="4">
					<div class="label">电子邮件</div>
					<div class="value">{{ detail.contactsEmail || '-' }}</div>
				</el-col>
				<el-col :span="4">
					<div class="label">手机号码</div>
					<div class="value">{{ detail.contactsMobile || '-' }}</div>
				</el-col>
				<el-col :span="3">
					<div class="label">QQ号</div>
					<div class="value">{{ detail.contactsQq || '-' }}</div>
				</el-col>
				<el-col :span="3">
					<div class="label">微信号</div>
					<div class="value">{{ detail.contactsWechat || '-' }}</div>
				</el-col>
			</el-row>
			<div class="section-title">开票信息情况</div>
			<el-row>
				<el-col :span="4">
					<div class="label">企业税号</div>
					<div class="value">{{ detail.invoicingTax || '-' }}</div>
				</el-col>
				<el-col :span="3">
					<div class="label">电话</div>
					<div class="value">{{ detail.invoicingPhone || '-' }}</div>
				</el-col>
				<el-col :span="6">
					<div class="label">地址</div>
					<div class="value">{{ detail.invoicingAddr || '-' }}</div>
				</el-col>
				<el-col :span="5">
					<div class="label">开户行</div>
					<div class="value">{{ detail.invoicingBank || '-' }}</div>
				</el-col>
				<el-col :span="3">
					<div class="label">开票代码</div>
					<div class="value">{{ detail.invoicingCode || '-' }}</div>
				</el-col>
				<el-col :span="3">
					<div class="label">网站</div>
					<div class="value">{{ detail.invoicingUrl || '-' }}</div>
				</el-col>
			</el-row> 
			<el-row>
				<el-col :span="4">
					<div class="label">传真号码</div>
					<div class="value">{{ detail.invoicingFax || '-' }}</div>
				</el-col>
				<el-col :span="3">
					<div class="label">企业类型</div>
					<div class="value">
						<span v-if="detail.invoicingEnterpriseType == 1">上市公司</span>
						<span v-else-if="detail.invoicingEnterpriseType == 2">非上市公司</span>
						<span v-else>-</span>
					</div>
				</el-col>
				<el-col :span="17">
					<div class="label"></div>
					<div class="value"></div>
				</el-col>
			</el-row> 
			<el-row>
				<el-col :span="24">
					<div class="label">公司简介</div>
					<div class="value">{{ detail.invoicingBlurb || '-' }}</div>
				</el-col>
			</el-row> 
			<el-row>
				<el-col :span="24">
					<div class="label">主营范围</div>
					<div class="value">{{ detail.mainBusiness || '-' }}</div>
				</el-col>
			</el-row> 
			<div class="radio-box">
				<el-radio v-model="radio" :label="1">通过审核</el-radio>
				<el-radio v-model="radio" :label="2">返回修改</el-radio>
			</div>
			<el-button type="primary" class="submit-btn" @click="auditSubmit">立即提交</el-button>
			<el-button @click="closeEdit">返回</el-button>
		</div>
	</div>
	<EditDialog
		v-if="addVisible"
		:visible="addVisible"
		@hideDialog="hideAddMember"
	/>
</template>

<style lang="scss" scoped>
	.dialogEdit {
		height: 200px !important;
	}
	.detail{
		.section-title{
			padding: 10px 0;
			color: #515a6e;
			font-weight: bold;
			font-size: 16px;
		}
		.el-row{
			outline: 1px solid #ebeef5;
			.el-col{
				display: flex;
				flex-direction: column;
				border-right: 1px solid #ebeef5;
				.label{
					height: 34px;
					box-sizing: border-box;
					background-color: #f8f8f9;
					color: #515a6e;
					font-weight: bold;
					font-size: 14px;
				}
				.label,
				.value{
					display: flex;
					align-items: center;
					padding: 6px 10px;
					box-sizing: border-box;
					color: #606266;
					font-size: 14px;
				}
				.value{
					flex: 1;
				}
				&:last-of-type{
					border-right: none;
				}
			}
		}
		.radio-box{
			margin-top: 20px;
		}
		.submit-btn{
			margin: 20px 0px;
		}
	}
</style>
 